<template>
    <header class="layout-header px-[16px]">
        <div class="header-contain">
            <!--            <Logo class="flex-none mr-4" />-->
            <!-- <Navbar class="w-[600px]" /> -->
            <div class="flex items-center flex-1 cursor-pointer">
                <template v-if="isBulletin">
                    <el-icon size="16px" color="#666">
                        <BellFilled />
                    </el-icon>
                    <div
                        class="ml-2 text-sm text-[#666]"
                        @click="showNotice = true"
                    >
                        {{ bulletinTitle }}
                    </div>
                </template>
            </div>
            <!-- <Search class="mr-[40px] flex-none" />
           -->
            <User class="flex-none ml-[10px]" />
        </div>
    </header>

    <NoticePopup v-model:show="showNotice"></NoticePopup>
</template>
<script lang="ts" setup>
import { BellFilled } from '@element-plus/icons-vue'
import User from './user.vue'
import { useAppStore } from '~/stores/app';
import NoticePopup from '../notice/index.vue'
// import Logo from './logo.vue'

const appStore = useAppStore()
const showNotice = ref(false)

// 标题
const bulletinTitle = computed(() => appStore.getBulletinConfig.bulletin_title)
const isBulletin = computed(() => appStore.getBulletinConfig.is_bulletin)
</script>

<style lang="scss" scoped>
.layout-header {
    height: var(--header-height);
    //border-bottom: 1px solid var(--el-border-color-extra-light);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1999;

    .header-contain {
        height: 100%;
        display: flex;
        align-items: center;
        // max-width: 1200px;
        margin: 0 auto;

        .navbar {
            --el-menu-item-font-size: var(--el-font-size-large);
            --el-menu-bg-color: var(--el-color-primary);
            --el-menu-active-color: var(--color-white);
            --el-menu-text-color: var(--color-white);
            --el-menu-item-hover-fill: var(--el-color-primary);
            --el-menu-hover-text-color: var(--color-white);
            --el-menu-hover-bg-color: var(--el-color-primary);
        }
    }
}
</style>
